<template>
  <!-- 应用首页 -->
  <div class="home-view">
    <!-- 导航栏 -->
    <van-sticky>
      <home-header></home-header>
    </van-sticky>
    <!-- 轮播图 -->
    <home-swiper :list="swiperList"></home-swiper>
    <!-- 宫格图 -->
    <home-grid :list="gridList"></home-grid>
    <!-- 热门推荐 -->
    <hot-recom :list="hotList"></hot-recom>
    <!-- 其他推荐 -->
    <other-recom :list="otherList"></other-recom>
  </div>
</template>

<script>
import HomeHeader from './cpns/HomeHeader.vue'
import HomeSwiper from './cpns/HomeSwiper.vue'
import HomeGrid from './cpns/HomeGrid.vue'
import HotRecom from './cpns/HotRecom.vue'
import OtherRecom from './cpns/OtherRecom.vue'
import axios from 'axios'
import { mapState } from 'vuex'
export default {
  name: 'HomeView',
  components: {
    HomeHeader,
    HomeSwiper,
    HomeGrid,
    HotRecom,
    OtherRecom,
  },
  data() {
    return {
      lastCity: '',
      swiperList: [],
      gridList: [],
      hotList: [],
      otherList: [],
    }
  },
  computed: {
    ...mapState(['city']),
  },
  mounted() {
    this.lastCity = this.city
    this.getData()
  },
  // 页面激活后的钩子
  activated() {
    // 本页面使用了keep-alive缓存，所以在此判断数据变化
    if (this.lastCity !== this.city) {
      this.lastCity = this.city
      this.getData()
    }
  },
  methods: {
    getData() {
      axios.get('/api/home.json?city=' + this.city).then((res) => {
        res = res.data
        if (res.code === 200 && res.data) {
          this.swiperList = res.data.swiperList
          this.gridList = res.data.gridList
          this.hotList = res.data.hotList
          this.otherList = res.data.otherList
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.home-view {
}
</style>
